<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单 -->
        <el-form ref="form" label-width="80px">
          <div class="add">
            <el-form-item label="关键字" size="small">
              <el-input
                v-model="input"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" size="small">
              <el-select placeholder="请选择" v-model="selectVal">
                <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
              </el-select>
            </el-form-item>
            <div class="btnAdd">
              <el-button
                style="margin-left: 10px"
                size="small"
                @click="clearMedium"
                >清除</el-button
              >
              <el-button type="primary" size="small" @click="searchPrimary"
                >搜索</el-button
              >
            </div>

            <div class="link">
              <div class="addbar">
                <el-button type="success" size="small" @click="append('add')">
                  <i class="el-icon-edit" style="margin-right: 5px"></i>
                  新增技巧
                </el-button>
              </div>
            </div>
          </div>
        </el-form>

        <!-- 阴影部分 -->
        <div>
          <el-alert
            :title="`数据一共 ${total} 条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="300">
            <template #default="{ row }">
              <span span style="margin-left: 10px">{{ row.title }}</span>
              <i
                v-if="row.videoURL !== null"
                class="el-icon-film"
                style="color: #00f; font-size: 18px; cursor: pointer"
                @click="iconClick"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="200">
          </el-table-column>
          <el-table-column prop="username" label="录入人" width="250">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="录入时间"
            width="300"
            :formatter="formatDate"
          >
          </el-table-column>

          <el-table-column
            prop="state"
            label="状态"
            width="200"
            :formatter="filterTag"
          >
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button
                type="text"
                typeClick="modify"
                @click="append('preview',row.id)"
                >预览</el-button
              >
              <el-button type="text" @click="subjectCF(row)">{{
                !row.state ? '启用' : '禁用'
              }}</el-button>
              <el-button
                type="text"
                typeClick="modify"
                @click="append('edit', row.id)"
                :disabled="row.state ? true : false"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="del(row.id)"
                :disabled="row.state ? true : false"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="el-pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes, jumper"
            :current-page="page"
            :page-size="pageSize"
            :total="total"
            :page-sizes="pages"
          >
          </el-pagination>
        </div>
        <!-- 弹出框 -->
        <el-dialog
          :title="drawerTitle"
          :visible.sync="dialogFormVisible"
          :close="handleClose"
           width="800px"
        >
          <div v-if="this.typeClick!=='preview'">
            <el-form
              label-width="100px"
              ref="Jumpform"
              :model="Jumpform"
              :rules="rules"
            >
              <el-form-item label="文章标题:" size="small" prop="title">
                <el-input
                  placeholder="请输入文章标签"
                  v-model="Jumpform.title"
                ></el-input>
              </el-form-item>
              <el-form-item label="文章内容:" prop="articleBody">
                <quill-editor
                  v-model="Jumpform.articleBody"
                ></quill-editor>
              </el-form-item>
              <el-form-item label="视频地址:" size="small" prop="videoURL">
                <el-input
                  placeholder="请输入视频地址"
                  v-model="Jumpform.videoURL"
                ></el-input>
              </el-form-item>
            </el-form>

            <el-row type="flex" style="text-align: right; margin-top: 20px">
              <el-col :span="24">
                <el-button @click="cancellation">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </el-col>
            </el-row>
          </div>

          <div v-if="this.typeClick==='preview'">
            <h2>{{Jumpform.title}}</h2>
            <p> {{createTimeDate()}} 超级管理员 <i class="el-icon-view"></i> {{Jumpform.visits}}</p>
            <div class="contentBox" v-html="Jumpform.articleBody"></div>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

import {
  list,
  remove,
  changeState,
  add,
  detail,
  update
} from '../../api/hmmm/articles'
import { formatDate } from '../components/timeDate.js'
import moment from 'moment'
import { Message } from 'element-ui'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      list: [],
      // 分页器
      page: 1,
      pageSize: 10,
      total: 10,
      pages: [5, 10, 20, 50],
      // 搜索框
      selectVal: '',
      input: '',
      dialogFormVisible: false,
      typeClick: '',
      Jumpform: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.initData()
  },
  computed: {
    drawerTitle () {
      let title = ''
      if (this.typeClick === 'add') title = '新增文章'
      if (this.typeClick === 'edit') title = '修改文章'
      if (this.typeClick === 'preview') title = '预览文章'
      return title
    }

  },
  methods: {
    // 获取列表
    async initData () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pageSize,
        pages: this.pages
      })
      console.log(data)
      this.list = data.items
      this.total = data.counts
    },
    // 页尺寸
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val
      this.initData()
    },
    // 当前页数
    handleCurrentChange (val) {
      // console.log(val)
      this.page = val
      this.initData()
    },
    // 时间格式
    formatDate (row) {
      return formatDate(row.createTime)
    },
    // 渲染时间
    createTimeDate () {
      return moment(this.Jumpform.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    // 状态
    filterTag (value, row) {
      // console.log(value.state)
      return value.state ? '已启用' : '已禁用'
    },
    // 清除
    clearMedium () {
      this.input = ''
      this.selectVal = ''
      // this.initData()
    },
    // 搜索
    async searchPrimary () {
      if (!this.input && !this.selectVal) return this.initData()
      const { data } = await list({
        keyword: this.input,
        state: this.selectVal === '启用' ? 1 : 0
      })
      console.log(data)
      this.list = data.items
    },
    // 删除
    del (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // console.log(id)
          await remove({ id })
          this.initData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 状态--启用/禁用
    async subjectCF (val) {
      try {
        await changeState({
          id: val.id,
          state: val.state === 1 ? 0 : 1
        })
        Message.success('修改成功')
        this.initData()
      } catch (error) {
        Message.error('修改失败')
      }
    },
    // 点击视频
    iconClick () {},
    // 关闭弹窗清空表单
    handleClose () {
      this.dialogFormVisible = false
      this.$refs.Jumpform.resetFields()
    },
    // 新增/修改/预览
    async append (type, id) {
      if (type === 'add') {
        this.Jumpform = {
          title: '',
          articleBody: '',
          videoURL: ''
        }
        // 新增
        this.dialogFormVisible = true
        this.typeClick = type
      } else {
        // 修改
        this.dialogFormVisible = true
        this.typeClick = type
        const res = await detail({ id })
        // console.log(res)
        this.Jumpform = {
          ...res.data
        }
      }
      // else if (type === 'preview') {
      //   this.dialogFormVisible = true
      //   this.typeClick = type
      //   const res = await detail({ id })
      //   // console.log(res)
      //   this.Jumpform = {
      //     ...res.data
      //   }
      // }
    },

    // 点击取消
    cancellation () {
      this.handleClose()
    },
    // 点击确定
    submit () {
      this.$refs.Jumpform.validate(async (isOk) => {
        if (isOk) {
          if (this.typeClick === 'add') {
            await add({
              title: this.Jumpform.title,
              articleBody: this.Jumpform.articleBody
            })
            Message.success('新增成功')
          } else if (this.typeClick === 'edit') {
            const { id, title, articleBody, videoURL } = this.Jumpform
            await update({
              id,
              title,
              articleBody,
              videoURL
            })
            Message.success('修改成功')
          }
          this.handleClose()
          this.initData()
        }
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0;
  margin: 10px;
}
.add {
  display: flex;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.addbar {
  text-align: right;
}
.btnAdd {
  width: 200px;
}
.link {
  display: flex;
  justify-content: right;
  text-align: right;
  width: 50%;
}
.link-a {
  padding-top: 7px;
  margin-right: 10px;
}
</style>

<style>
.ql-editor  {
  height: 200px;
}
.contentBox{
  background: #f5f5f5;
  padding: 10px;
  border-top: 1px dashed #ccc;
}

</style>
